<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>
        <!-- Bootstrap -->
        <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
<!--【1】
    .text-left
    .text-center
    .text-right
    text-justify
    水平对其方式
    <b>或<strong>粗体
    <i>或<em>斜体

    【2】
    起强调作用的一套类

    Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
    •.text-muted：提示，使用浅灰色（#999）
    •.text-primary：主要，使用蓝色（#428bca）
    •.text-success：成功，使用浅绿色(#3c763d)
    •.text-info：通知信息，使用浅蓝色（#31708f）
    •.text-warning：警告，使用黄色（#8a6d3b）
    •.text-danger：危险，使用褐色（#a94442）

 -->

<!-- 【3】 -->
        <!-- 两端对其 -->
        <p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
        <p class="text-lowercase">HELLO</p>
        <!-- 转换为小写 -->
        <p class="text-uppercase">hello</p>
        <!-- 转换为大写 -->
        <p class="text-capitalize">hello</p>
        <!-- 转换为首字母大写 -->

<!-- 【4】 -->
<!-- .table -->
    <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
    <!--

    table   基础表格
    table-striped  斑马线
    table-bordered  有边框
    table-hover     鼠标移入有颜色变化
    table-condensed  紧凑型的表格
    table-responsive    响应式表格
    Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失
    -->
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr class="success">
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
      <tr class="active">
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr class="info">
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
      <tr class="waring">
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr class="danger">
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

 <table class="table table-bordered">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
</table>

<!-- 【5】强调 -->

        <div class="text-muted">.text-muted 效果</div>
        <div class="text-primary">.text-primary效果</div>
        <div class="text-success">.text-success效果</div>
        <div class="text-info">.text-info效果</div>
        <div class="text-warning">.text-warning效果</div>
        <div class="text-danger">.text-danger效果</div>


<!-- 【6】列表 -->
<!-- 只对margin做了稍微的调整 -->
        <h5>无序列表</h5>
        <ul>
            <li>列表项目</li>
            <li>列表项目</li>
            <li>列表项目</li>
            <li>列表项目</li>
            <li>列表项目</li>
        </ul>
        <h5>有序列表</h5>
        <ol>
              <li>项目列表一</li>
              <li>项目列表二</li>
              <li>项目列表三</li>
        </ol>
        <h5>有序列表嵌套</h5>
        <ol>
            <li>有序列表</li>
            <li>
            有序列表
                <ol>
                <li>有序列表(2)</li>
                <li>有序列表(2)</li>
                </ol>
            </li>
            <li>有序列表</li>
        </ol>
        <!-- 无点列表 -->
        <ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
        <!-- 内联列表 -->
        </ul>

        <ul class="list-inline">
        <!-- 横向排列 -->
            <li>java</li>
            <li>js</li>
            <li>jquery</li>
            <li>css</li>
        </ul>
        <!-- 自定义列表 -->
        <!-- 只是调整了行间距，外边距和字体加粗效果。 -->
         <dl>
        <dt>W3cplus</dt>
        <dd>一个致力于推广国内前端行业的技术博客</dd>
        <dt>慕课网</dt>
        <dd>一个真心在做教育的网站</dd>
        </dl>


        <!-- 水平定义列表 -->
        <!-- 此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
        1、将dt设置了一个左浮动，并且设置了一个宽度为160px
        2、将dd设置一个margin-left的值为180px，达到水平的效果
        3、当标题宽度超过160px时，将会显示三个省略号 -->
        <dl class="dl-horizontal">
            <dt>W3cplus</dt>
            <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
            <dt>慕课网</dt>
            <dd>一个专业的，真心实意在做培训的网站</dd>
            <dt>我来测试一个标题，我来测试一个标题</dt>
            <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
        </dl>
<!-- 【7】 风格代码-->

        <!-- 在使用代码时，用户可以据具体的需求来使用不同的类型：
         1、<code>：一般是针对于单个单词或单个句子的代码
         2、<pre>：一般是针对于多行代码（也就是成块的代码）
         3、<kbd>:一般是表示用户要通过键盘输入的内容 -->

        <div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>
        pre风格：
        <div>
        <pre>
        &lt;ul&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;li&gt;...&lt;/li&gt;
        &lt;/ul&gt;
        </pre>
        </div>
        kbd风格：
        <div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
        <!-- 不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好， -->



        <!-- 使用pre-scrollable高度超出340px，就会在Y轴出现滚动条 -->
        <!--下面是代码任务部分-->
        <pre class="pre-scrollable">
        <ol>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
        </ol>
        </pre>

























        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>